﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字滚动（原创）</title>
<script src="../js/jquery.min.js"></script>
<style>
ul {
	list-style:none;
}
</style>
</head>
<body>
<div id="box">
    <ul id="con1">
        <li>文字滚动信息1</li>
        <li>文字滚动信息2</li>
        <li>文字滚动信息3</li>
        <li>文字滚动信息4</li>
        <li>文字滚动信息5</li>
        <li>文字滚动信息6</li>
        <li>文字滚动信息7</li>
        <li>文字滚动信息8</li>
        <li>文字滚动信息9</li>
        <li>文字滚动信息10</li>
        <li>文字滚动信息11</li>
        <li>文字滚动信息12</li>
    </ul>
    
</div>

<script>
var lH = $('#box li').height();
setInterval(function() {
    $('#box li').eq(0).animate({
        marginTop: -lH,
        opacity: 0
    }, 'slow', function() {
        $('#box li').eq(0).css('margin-top', '').appendTo('#box ul').animate({
            opacity: 1
        });
    });
}, 1000);
</script>

</body>
</html>
